<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref } from 'vue'
import type { EChartsInitOpts } from 'echarts/types/dist/echarts'
import type { ECharts } from 'echarts'

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
})


//获取dom元素
const echartsRef = ref<HTMLElement>()
let instance: ECharts


//更改实例大小
const instanceResize = () => {
  instance.resize()
}

const initEcharts = () => {
  //1.初始化dom得到实例
  instance = echarts.init(echartsRef.value)

  //2.设置options
  instance.setOption(props.options)

  //3.设置改变大小之后重置大小
  window.addEventListener('resize', instanceResize)
}

//页面挂载之后
onMounted(() => {
  initEcharts()
})
//页面卸载之后
onUnmounted(() => {
  window.removeEventListener('resize', instanceResize)
})


</script>

<template>
  <div ref="echartsRef" class="w-full h-full">
  </div>
</template>

<style scoped>

</style>
